import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class CountenanceWidget extends StatefulWidget {
  final Function(int) onValueChange;

  const CountenanceWidget({super.key,required this.onValueChange });

  
  @override
  State<CountenanceWidget> createState() => _CountenanceWidgetState();
}

class _CountenanceWidgetState extends State<CountenanceWidget> {
  int _index = 0;

  void _handleTap(int newIndex) {
    if (_index != newIndex) {
      setState(() {
        _index = newIndex;
      });
      widget.onValueChange(_index); // 调用外部传递的回调函数
    }
  }
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        GestureDetector(
          child: Container(
            width: 63,
            height: 25,
            alignment: Alignment.center,
            margin: EdgeInsets.only(right: 20),
            decoration: _index == 0
                ? BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    gradient: const LinearGradient(colors: [
                      Color(0xFFA5D400),
                      Color(0xFF8DFD89),
                      Color(0xFF0BD1C7),
                    ]),
                  )
                : BoxDecoration(
                    color: Color(0xFF3F3E44),
                    borderRadius: BorderRadius.circular(5),
                  ),
            child: Text(
              '随机',
              style: TextStyle(
                fontSize: 12,
                color: _index == 0 ? const Color(0xFF000000) : Colors.white,
              ),
            ),
          ),
          onTap: () {
            
            _handleTap(0);
          },
        ),
        GestureDetector(
          child: Container(
            width: 63,
            height: 25,
            alignment: Alignment.center,
            margin: EdgeInsets.only(right: 20),
            decoration: _index == 1
                ? BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    gradient: const LinearGradient(colors: [
                      Color(0xFFA5D400),
                      Color(0xFF8DFD89),
                      Color(0xFF0BD1C7),
                    ]),
                  )
                : BoxDecoration(
                    color: Color(0xFF3F3E44),
                    borderRadius: BorderRadius.circular(5),
                  ),
            child: Text(
              '男声',
              style: TextStyle(
                fontSize: 12,
                color: _index == 1 ? const Color(0xFF000000) : Colors.white,
              ),
            ),
          ),
          onTap: () {
            _handleTap(1);
          },
        ),
        GestureDetector(
          child: Container(
            width: 63,
            height: 25,
            alignment: Alignment.center,
            margin: EdgeInsets.only(right: 20),
            decoration: _index == 2
                ? BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    gradient: const LinearGradient(colors: [
                      Color(0xFFA5D400),
                      Color(0xFF8DFD89),
                      Color(0xFF0BD1C7),
                    ]),
                  )
                : BoxDecoration(
                    color: Color(0xFF3F3E44),
                    borderRadius: BorderRadius.circular(5),
                  ),
            child: Text(
              '女声',
              style: TextStyle(
                fontSize: 12,
                color: _index == 2 ? const Color(0xFF000000) : Colors.white,
              ),
            ),
          ),
          onTap: () {
            _handleTap(2);
          },
        ),
      ],
    );
  }
}
